import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import Authorized from '@/utils/Authorized';
import { Card, Row, Col, Table, Modal, Divider, Alert, Slider, Button, Input, Popconfirm, Empty, Tag } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Score from './Score';


const { Meta } = Card;

@connect(({ competition, paper }) => ({
  enrollUser: competition.enrollUser,
  paper: paper.paper,
}))
class Grade extends PureComponent {
  state = { 
    visible: false,
  }

  componentDidMount() {
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'competition/getEnrollUser',
      payload: {
        competitionId: id,
      }
    })
  }

  

  handlePreview = () => {
    const { match: { params: { id } } } = this.props;
    router.push(`/preview/competition/${id}/paper`)
  }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }

  handleOk = () => {
    this.setState({
      visible: false,
    });
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'competition/getEnrollUser',
      payload: {
        competitionId: id,
      }
    })
  }

  handleCancel = () => {
    this.setState({
      visible: false,
    });
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'competition/getEnrollUser',
      payload: {
        competitionId: id,
      }
    })
  }

  handleClick = (userId) => {
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'paper/getUserExaminationPaper',
      payload: {
        competitionId: id,
        userId: userId,
      },
      callback: (res) => {
        if (res) {
          this.showModal();
        }
      }
    })
  }

  handleDefaultFile = (paperId, id) => {
    if (id) {
      const list = `http://localhost:8080/image/answer/${paperId}/${id}`;
      return list;
    }
  }

  render() {
    const columns = [{
      title: '用户账号名',
      dataIndex: 'username',
      key: 'username',
      render: text => <a href="javascript:;">{text}</a>,
    }, {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: text => (
        <span>
          {text === 1 ? <Tag color="blue">男</Tag> : text === 2 ? <Tag color="blue">女</Tag> : <Tag>未知</Tag>}
        </span>
      ),
    }, {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    }, {
      title: '分数',
      dataIndex: 'score',
      key: 'score',
    }, {
      title: '提交的作品',
      key: 'action',
      render: (text, record) => (
        <span>
          <a onClick={() => this.handleClick(record.id)}>查看{record.name}提交的作品</a>
          <Divider type="vertical" />
          <a href="javascript:;"></a>
        </span>
      ),
    }];

    const { enrollUser, paper, match: { params: { id } }, } = this.props;
    const { visible } = this.state;
    // console.log(enrollUser)
    // console.log(paper)

    const column = paper && paper.columnsVo && paper.columnsVo.map((item, index) => (
      <Row key={item.id}>
        <Col>
          <Card
            key={item.id}
            title={`${index + 1} 、 ${item.title}`}
          >
            {/* {console.log(item)} */}
            {item.questionVos.map((question, index1) => (
              <Row key={question.id}>
                <Card
                  key={question.id}
                  title={`问题${index + 1}:${question.title}`}
                >
                  <span>提交的作品：</span>
                  <a href={this.handleDefaultFile(item.answerPaperVos[index1].paperId, item.answerPaperVos[index1].answer)}>点击下载</a>
                  {/* <span>{this.handleDefaultFile(item.answerPaperVos[index1].paperId, item.answerPaperVos[index1].answer)}</span> */}
                  <Authorized authority="teacher">
                    <Score competitionId={id} question={question} questionId={question.id} userId={item.answerPaperVos[index1].userId} />
                  </Authorized>
                </Card>
              </Row>
            ))}
          </Card>
        </Col>

      </Row>
    ))

    return (
      <PageHeaderWrapper>
        <Row type="flex" justify="center">
          <Col span={16}>
            <Card
              style={{ height: 600 }}
            >
              <h2>参赛人员</h2>
              <Table rowKey={record => record.id} columns={columns} dataSource={enrollUser} />
            </Card>
          </Col>
        </Row>
        <Modal
          width={800}
          bodyStyle={{ padding: 10 }}
          title={paper && paper.paperVo && paper.paperVo.title}
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          destroyOnClose
          maskClosable={false}
          okText="关闭窗口"
        >
          <Alert message="请评委老师慎重打分，只允许一次评分，评分后不可更改" type="warning" />
          {column}
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default Grade;


